<template>
	<van-swipe class="partner-swiper" duration="300" :height="300">
	  <van-swipe-item v-for="(item,index) in activityData.image" :key="index">
		  <img :src="item" class="fadeIn">
	  </van-swipe-item>
	  <template #indicator="{ active, total }" v-if="Object.keys(activityData).length > 0 && activityData.image.length > 1">
	    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
	  </template>
	</van-swipe>
	<!-- 发布者 -->
	<div class="partner-view">
	<div class="companion-name global-display global-a-items" v-for="(item,index) in activityData.author_data" :key="index">
		<img :src="item.avatarUrl" alt="">
		<div>
			<p>{{item.nickname}}</p>
			<p>{{activityData.timestamp}}</p>
		</div>
		<div v-if="signupRes" class="companion-new">已报名</div>
		<div v-if="signupMy" class="companion-new" @click="managIngMember">管理成员</div>
	</div>
	<div class="companion-title">{{activityData.description}}</div>
	<div class="companion-time global-display global-a-items">
		<img src="@/icon/concern/time.png" alt="">
		<p>时间：&nbsp;{{activityData.companion_time}}</p>
	</div>
	<div class="companion-time global-display global-a-items">
		<img src="@/icon/concern/address.png" alt="">
		<p>地点：&nbsp;{{activityData.city}} {{activityData.full_address}}</p>
	</div>
	<div class="companion-time global-display global-a-items">
		<img src="@/icon/concern/renshu.png" alt="">
		<p>希望人数：&nbsp;{{activityData.number_of_people}}人</p>
	</div>
	</div>
	<div v-if="applicantData.quantity > 0">
		<p class="applicant-people">{{applicantData.quantity}}人已报名({{applicantData.male}}男{{applicantData.female}}女)</p>
		<div class="applicant-view global-display global-a-items">
			<div class="global-display global-a-items global-f-direction" v-for="(item,index) in activityData.signups" :key="index">
				<img :src="item.avatarUrl" class="fadeIn">
				<p class="text-show">{{item.nickname}}</p>
			</div>
		</div>
	</div>
	<!-- 报名 -->
	<div v-if="signupBtn" class="sign-up other-up" @click="showBottom = true">报名</div>
	<div style="height: 200px;"></div>
	<!-- 弹出报名 -->
	<van-popup
	  v-model:show="showBottom"
	  position="bottom"
	  close-on-popstate
	  teleport="body"
	  :style="{ height: '80%' }"
	>
	<div class="popup-views">
		<van-field size="large" autofocus label-width="70px" v-model="submitData.contact" center clearable placeholder="请输入手机号或微信号,仅发起人可见" label="联系方式" />
		<div class="sex-views global-display global-a-items">
			<p>真实性别</p>
			<div class="sex-select global-display global-a-items">
				<p v-for="(item,index) in genderData" :key="index" 
				:class="[index == genderIndex ? 'gengderStyle' : '']"
				@click="genderFun(index,item.value)">{{item.name}}</p>
			</div>
		</div>
		<van-field v-model="submitData.message" rows="5" autosize type="textarea"
		show-word-limit
		maxlength="100"
		placeholder="自我介绍,发起人会通过你的自我介绍来判断是否与你同行,请认真的介绍下自己"/>
		<div class="other-textarea" @click="showBottom = true">
			<p class="sign-up" @click="subMit">提交</p>
		</div>
	</div>
	</van-popup>
</template>

<script setup>
import { reactive, ref,onMounted } from "vue"
import request from '@/api/request.js'
import { useRoute,useRouter } from 'vue-router'
const $routeQuery = useRoute()  // 用于接收路由参数的
const $router = useRouter()  // 这是路由跳转的
import { showToast,showLoadingToast } from 'vant';
import emitter from '@/api/event.js'
// 弹出框
const showBottom = ref(false)
// 存储视图层性别
const genderData = ref([{name:'男',value:1},{name:'女',value:0}])
const genderIndex = ref(0)
function genderFun(index,value){
	genderIndex.value = index
	submitData.gender = value
}
// 输入和选中值
const submitData = reactive({
	contact:'',
	gender:1,
	message:''
})
// 活动id
const activityId = ref('')
// 是否已报名
const signupRes = ref(false)
// 是否是自己发表的
const signupMy = ref(false)
// 是否显示报名表
const signupBtn = ref(true)
// 存储请求得到数据
const activityData = ref({})
// 存储报名人数说明
const applicantData = reactive({
	quantity:0,
	male:0,
	female:0
})
onMounted(async()=>{
	const _id = $routeQuery.query._id
	activityId.value = _id
	await requestApi()
})
// 获取请求结果的方法
async function requestApi(){
	// 查询是否已报名
	const signupQuery = await request.get('/signup_query',{id:activityId.value})
	const res = await request.get('/companion_details',{id:activityId.value})
	// 判断角色
	if(signupQuery.data == '001'){//用户自己发表的
		signupRes.value = false
		signupMy.value = true
		signupBtn.value = false
	}else if(signupQuery.data == '002'){//已报名
		signupRes.value = true
		signupMy.value = false
		signupBtn.value = false
	}else{//未报名
		signupRes.value = false
		signupMy.value = false
		signupBtn.value = true
	}
	activityData.value = res.data[0]
	applicantData.quantity = res.data[0].signups.length
	res.data[0].signups.forEach(item=>{//判断报名用户性别
		if(item.gender === 0){
			applicantData.female++
		}else{
			applicantData.male++
		}
	})
}
// 报名结伴
async function subMit(){
	const toast1 = showLoadingToast({
	  message: '发布中...',
	  forbidClick: true,
	  duration:0
	});
	try{
		await request.post('/sign_up_partner',
			{
				signup_id:activityId.value,
				contact_inform:submitData.contact,
				gender:submitData.gender,
				introduce:submitData.message
			},
		)
		toast1.close();
		await requestApi()
		showBottom.value = false
	}catch(e){
		toast1.close();
	}
}
// 管理成员
function managIngMember(){
	$router.push({path: '/managing-member', query: {_id:activityId.value}})
}
// 登陆成功被触发
emitter.on('login-success', async() => {
	await requestApi()
})
</script>

<style>
@import url('@/style/index.css');
.partner-swiper{
	margin-bottom: 10px;
	height: 300px;
}
.partner-swiper .van-swipe-item img{
	object-fit: cover;
	width: 100%;
	height: 300px;
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 10px;
    padding: 2px 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.6);
	border-radius: 3px;
	color: #ffffff;
}
.partner-view{
	padding: 0 10px;
}
.applicant-people{
	padding-top: 20px;
	padding-left: 10px;
	border-top: 1px solid #e3e4e7;
	color: #727476;
}
.applicant-view{
	overflow-x: auto;
	width: 375px;
	scrollbar-width: none; /* 隐藏滚动条 */
	padding: 20px 0;
}
.applicant-view::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.applicant-view img{
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.applicant-view div{
	/* width: 70px; */
}
.applicant-view p{
	margin: 5px 0;
	font-size: 13px;
	font-weight: bold;
	width: 70px;
	text-align: center;
}
.sex-views{
	padding: 10px 16px;
}
.sex-select p{
	background-color: #f7f7f7;
	margin: 0 15px;
	padding: 5px 30px;
	border-radius: 4px;
}
.gengderStyle{
	background-color: #f8d957 !important;
}
</style>